function customTag(tagName, fn) {
  Array.from(document.getElementsByTagName(tagName)).forEach(fn);
}

function powerHandler(element) {
  let top = element.getAttribute("top") + "rem",
    left = element.getAttribute("left") + "rem";
  let style = `width: 2.4rem;top: ${top};left: ${left}`;
  element.innerHTML = `
    <div
      id="power"
      class="cc-power"
      type="power"
      style="${style}"
    >
      <div></div>
    </div>`;
}

function lineHandler(element) {
  let top = element.getAttribute("top") + "rem",
    left = element.getAttribute("left") + "rem",
    width = element.getAttribute("length") + "rem",
    direction = element.getAttribute("direction");
  let style = `width: ${width};top: ${top};left: ${left}`;
  if (direction == "u" || direction == "d") {
    style += `;transform-origin: left;transform: rotate(90deg);`;
  }
  element.innerHTML = `
    <div
      class="cc-line"
      style="${style}"
      direction="${direction}"
      type="line"
    ></div>`;
}

function switchHandler(element) {
  let top = element.getAttribute("top") + "rem",
    left = element.getAttribute("left") + "rem",
    direction = element.getAttribute("direction");
  let style = `width: 3rem;top: ${top};left: ${left}`;
  element.innerHTML = `
  <div
    class="cc-switch cc-switch-off"
    style="${style}"
    onclick="top.CrazyCircuit.toggleSwitch(this)"
    direction="${direction}"
    type="switch"
  >
    <div class="cc-switch-before"></div>
    <div class="cc-switch-line"></div>
    <div class="cc-switch-after"></div>
  </div>`;
}

function bulbHandler(element) {
  let top = element.getAttribute("top") + "rem",
    left = element.getAttribute("left") + "rem",
    direction = element.getAttribute("direction");
  let style = `width: 3.2rem;top: ${top};left: ${left}`;
  element.innerHTML = `
    <div
      class="cc-bulb"
      style="${style}"
      direction="${direction}"
      type="bulb"
    ></div>`;
}

function resistanceHandler(element) {
  let top = element.getAttribute("top") + "rem",
    left = element.getAttribute("left") + "rem",
    direction = element.getAttribute("direction");
  let style = `width: 3rem;top: ${top};left: ${left}`;
  if (direction == "u" || direction == "d") {
    style += `;transform-origin: left;transform: rotate(90deg);`;
  }
  element.innerHTML = `
    <div
      class="cc-resistance"
      style="${style}"
      direction="${direction}"
      type="resistance"
    ></div>`;
}

function iconHandler(element) {
  let top = element.getAttribute("top") + "rem",
    left = element.getAttribute("left") + "rem",
    direction = element.getAttribute("direction"),
    type = element.getAttribute("type");
  let style = `width: 3rem;top: ${top};left: ${left}`;
  element.innerHTML = `
    <div
      class="cc-icon cc-${type}"
      style="${style}"
      direction="${direction}"
      type="${type}"
    ></div>`;
}

customTag("cc-power", powerHandler);
customTag("cc-line", lineHandler);
customTag("cc-switch", switchHandler);
customTag("cc-bulb", bulbHandler);
customTag("cc-resistance", resistanceHandler);
customTag("cc-icon", iconHandler);
